<template>

  <div class="weather">
    <div class="item">
      <div class="ico">
        <span class="iconfont icon-wendu"></span>
      </div>
      <div>
        <div class="fs">{{ framStore.weacherFarmItem.textDay }}</div>
        <div class="vs">{{ framStore.weacherFarmItem.tempMin }}~{{ framStore.weacherFarmItem.tempMax }}℃</div>
      </div>
    </div>
    <div class="item">
      <div class="ico">
        <span class="iconfont icon-shidu"></span>
      </div>
      <div>
        <div class="fs">相对湿度</div>
        <div class="vs">{{ framStore.weacherFarmItem.humidity }}%</div>
      </div>
    </div>
    <div class="item">
      <div class="ico">
        <span class="iconfont icon-jiangshui"></span>
      </div>
      <div>
        <div class="fs">降水量</div>
        <div class="vs">{{ framStore.weacherFarmItem.precip }}mm</div>
      </div>
    </div>
    <div class="item">
      <div class="ico">
        <span class="iconfont icon-feng"></span>
      </div>
      <div>
        <div class="fs">南风</div>
        <div class="vs">{{ framStore.weacherFarmItem.windDir }}级</div>
      </div>
    </div>
    <div class="item">
      <div class="ico">
        <span class="iconfont icon-qiya"></span>
      </div>
      <div>
        <div class="fs">大气压</div>
        <div class="vs">{{ framStore.weacherFarmItem.pressure }}hpa</div>
      </div>
    </div>
  </div>

  <div class="weather-warning">
    <div class="item">
        <div class="iconfont icon-yubao"></div>
        <div class="name">天气预警</div>
        <div>{{summary?summary:'无'}}</div>
    </div>
    <div class="item">
        <div class="iconfont icon-yujing"></div>
        <div class="name">灾害预警</div>
        <div>
            <el-space>
                <div v-if="!warningList||!warningList.length">无</div>
                <el-tag v-for="item in warningList" :key="item.type" 
                    :type="getColorType(item.level)">{{item.typeName}}</el-tag>
                <!-- <el-tag type="warning">大风</el-tag>
                <el-tag type="danger">高温</el-tag> -->
            </el-space>
        </div>
    </div>
  </div>

</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useUserStore } from '@/pinia/modules/user'
const userStore = useUserStore()
import { useFramStore } from '@/pinia/modules/farm'
const framStore = useFramStore()
import { getPredictionWeather, getFarmWeather } from '@/api/plant'
const summary = ref('')
const warningList = ref(null)
const get_Prediction_Weather = (location) => {

    warningList.value = []
    getPredictionWeather(location).then(res => {
        summary.value = res.summary
    })
}

onMounted(async ()=>{

  let companyId = userStore.userInfo.companyId

  let res = await getFarmWeather({
    limit: 1000,
    page: 1,
    isEnable:true,
    companyId: companyId || null
  })
  let list = res.data
  let wfi = list.find(item=>item.farmId==userStore.userInfo.farmId)
  framStore.set_weacherFarmItem(wfi)

  if( framStore.weacherFarmItem.warning ){
    warningList.value = JSON.parse(framStore.weacherFarmItem.warning)
  }

})

const getColorType = ( type ) => {
    let typeText = 'info'
    if( type == '白色' ){
        typeText = 'info'
    }else if( type == '蓝色' ){
        typeText = 'primary'
    }else if( type == '绿色' ){
        typeText = 'success'
    }else if( type == '黄色' ){
        typeText = 'warning'
    }else if( type == '橙色' ){
        typeText = 'warning'
    }else if( type == '红色' ){
        typeText = 'danger'
    }else if( type == '黑色' ){
        typeText = 'info'
    }
    return typeText
}

defineExpose({ get_Prediction_Weather })
</script>


<style lang="scss" scoped>

.weather{
    display: flex; 
    gap: 6px; 
    margin-bottom: 20px;
    .item{
        display: flex; align-items: center;
        flex: 1; width: 20%; background-color: #f4f4f4;
        box-sizing: border-box; padding: 15px 10px;
        .ico{
            margin-right: 20px; padding-left: 15px;color:#565656;
        }
        .fs{
            font-size: 14px; color: #999; margin-bottom: 5px;
        }
        .vs{
            font-weight: bold;
        }
        .iconfont{
            font-size: 36px;
        }
    }
}
.weather-warning{
    margin-top: 10px; margin-bottom: 20px;
    display: flex; gap: 10px;
    .item{
        flex: 1; width: 50%; display: flex; align-items: center;
        box-sizing: border-box; padding: 15px 10px; background-color: #f4f4f4;
        .name{
            font-weight: bold; margin-right: 10px;
        }
        .iconfont{
            font-size: 32px; margin: 0 15px 0 10px;color:#565656;
        }
    }
}

    @font-face {
      font-family: "iconfont"; /* Project id 4541074 */
      src: url('//at.alicdn.com/t/c/font_4541074_a4eav512rhg.woff2?t=1715325482028') format('woff2'),
          url('//at.alicdn.com/t/c/font_4541074_a4eav512rhg.woff?t=1715325482028') format('woff'),
          url('//at.alicdn.com/t/c/font_4541074_a4eav512rhg.ttf?t=1715325482028') format('truetype');
    }

    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .icon-qiya:before {
      content: "\eb25";
    }

    .icon-yujing:before {
      content: "\e644";
    }

    .icon-feng:before {
      content: "\e650";
    }

    .icon-jiangshui:before {
      content: "\e637";
    }

    .icon-shidu:before {
      content: "\e6bd";
    }

    .icon-wendu:before {
      content: "\e6be";
    }

    .icon-yubao:before {
      content: "\e865";
    }

</style>
